
import { useState ,useEffect} from 'react'
export const AddHook = ()=>{
    const [state, setState] = useState(0)
    const [movies,setMovies] = useState([
        {id:1,name:'天龙八部',price:50},
        {id:2,name:'笑傲江湖',price:60},
        {id:3,name:'神雕侠侣',price:70},
    ])

    function changePrice(index){
        let tmp = [...movies]
        movies[index].price ++;
        setMovies(tmp)
    }

    useEffect(()=>{
        console.log('exec useEffect======================')
    },[])

    return (
        <div>hook {state}
            <button style={{margin:'0 22px'}} onClick={()=>setState(state + 1)}> + 1 </button>

            <button onClick={()=>setState(state - 1)}> - 1 </button>
            <ul>{
                    movies.map((item,index) => {
                        return <li key={item.id}>{item.name} - ${ item.price}  <button onClick={()=>changePrice(index)}> + 1 </button></li>
                    })
                }
            </ul>
        </div>
    )
}